import Vue from 'vue'
import Vuex from 'vuex'
import { getTemplate, getSlotTemplate, getStringTypeAttr } from '@/components/template'
Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    screenWidth: [
      // 点击视图,调整比例,提供的比例项
      // {
      //   attr: '15',
      //   preview: '70',
      //   components: '15',
      // },
      // {
      //   attr: '20',
      //   preview: '60',
      //   components: '20',
      // },
      // {
      //   attr: '25',
      //   preview: '50',
      //   components: '25',
      // },
      {
        attr: '4',
        preview: '16',
        components: '4',
      },
      {
        attr: '6',
        preview: '12',
        components: '6',
      },
      {
        attr: '8',
        preview: '8',
        components: '8',
      },
    ],
    css: '', //用户根据class自定义css代码
    activeUI: 'iview-UI',
    currentComponent: {}, //预览视图的选中组件
    newComponentId:'',//最近拖进视图的组件id
    components: [], //预览视图的组件树
    backupComponents: [], //删除组件时备份的
    copiedComponents: [], //复制的组件
    // attr: { }, //使用自选组件样式
    // {
    //   //子组件
    //   attributes: {
    //     //属性
    //     class: {
    //       //类名
    //       type: 'text',
    //       value: '',
    //     },
    //     //文字
    //     text: {
    //       type: 'text',
    //       value: '20条评论',
    //     },
    //     slot: 'default',
    //   },
    //   info: {
    //     // 组件信息
    //     id: '3b7df8f7-aea5', //组件id
    //     name: 'Text', //组件名
    //     ui: 'Common', //ui库
    //   },
    //   parentId: '45e79459-0d45', // 父组件id
    //   slot: '', //插槽
    //   slots: { // 插入到哪个命名插槽
    //      default: [],
    // "nested": [],
    // "title": [],
    // "after": [],
    // "describe": [],
    // "right": [],
    // "leftAvatar": [],
    // "rightAvatar": [],
    // "left": [
    //     {
    //         "id": "b7427583-1b5c"
    //     }
    // ]
    //   },
    //   template: '<span data-component-active tabIndex="0" \n>20条评论</span>',
    // },
    // {
    //   //父组件
    //   template: `<mu-chip data-component-active tabIndex="0" backgroundColor="rgba(0, 0, 0, 0)" class="overview-chip">
    //       <mu-avatar id="4f11baab-f655" data-component-active tabIndex="0" backgroundColor="rgba(0, 0, 0, 0)" color="#000000" icon="art_track" :size="32">
    //       </mu-avatar>
    //       <span id="63cbf182-17a4" data-component-active tabIndex="0" >16篇文章</span>
    //     </mu-chip>`,
    //   attributes: {
    //     backgroundColor: {
    //       type: 'color',
    //       value: 'rgba(0, 0, 0, 0)',
    //     },
    //     color: {
    //       type: 'color',
    //       value: '',
    //     },
    //     class: {
    //       type: 'text',
    //       value: 'overview-chip',
    //     },
    //     slot: 'default',
    //   },
    //   slots: {
    //     // 子组件
    //     default: [
    //       {
    //         id: '33bf59a4-719e',
    //       },
    //       {
    //         id: '3b7df8f7-aea5',
    //       },
    //     ],
    //   },
    //   slot: 'default',
    //   info: {
    //     name: 'Chip',
    //     ui: 'Muse-UI',
    //     id: '45e79459-0d45',
    //   },
    //   parentId: '1b7cf877-3d3a',
    // },
  },
  mutations: {
    setState(state, obj) {
      Object.assign(state, obj)
      // 将整个state保存本地,后续用插件替换,保证刷新不丢失vuex
      localStorage.store = JSON.stringify(state)
    },
  },
  actions: {
    delComponent(context, id) {
      // 开始删除前,需要将现有的组件数组备份一份(用于撤销动作)
      context.commit('setState', { backupComponents: JSON.parse(JSON.stringify(context.state.components)) })
      let components = context.state.components
      let index = components.findIndex((c) => c.info.id === id)
      let component = components[index]
      //如果当前组件有父组件,需要从父组件的slots中删除
      if (component.parentId) {
        //  通过父组件id来找到对应的父组件
        let parent = components.find((c) => c.info.id === component.parentId)
        // 获取父组件下嵌套的子组件id数组，component.slot 可能是left,right，default等，
        // 表示子组件插入到父组件的哪个命名插槽，例如：component.slot为'left'，就表示插入到parent.slots的left插槽里面
        let slot = parent.slots[component.slot || component.attributes.slot || 'default']
        // 找到父组件下嵌套的当前组件,然后删除它
        let i = slot.findIndex((item) => item.id === component.info.id)
        slot.splice(i, 1)

        //递归找到顶级父级组件
        let getTop = function (_component) {
          // 如果父组件还有还有父级组件,需要找到顶级父组件
          if (_component.parentId) {
            let c = components.find((c) => c.info.id === _component.parentId)
            return getTop(c)
          } else {
            return _component
          }
        }

        // 更新删除当前组件后的模板
        let top = getTop(parent)
        top.template = getTemplate(top.info, top.attributes, top.slots).template
      }
      //删除当前组件所有子组件
      function delChildren(component) {
        let slots = component.slots
        Object.keys(slots).forEach((key) => {
          if (component.slots[key].length) {
            component.slots[key].forEach((val) => {
              // 通过插槽下的子组件id在components找到对应的组件
              let childIndex = components.findIndex((c) => c.info.id === val.id)
              let hasChild
              if (childIndex >= 0) {
                // Object.keys(components[childIndex].slots)，子组件插槽名字数组 例如：['left','right'....]
                hasChild = Object.keys(components[childIndex].slots).some((key2) => {
                  // 子组件，每一项插槽都有值
                  return components[childIndex].slots[key2].length > 0
                })
              }

              if (hasChild) {
                delChildren(components[childIndex])
              }
              components.splice(childIndex, 1)
            })
          }
        })
      }
      delChildren(component)

      //删除自身
      index = components.findIndex((c) => c.info.id === id) //components已被更新 重新获取索引
      components.splice(index, 1)

      //更新
      // 置空当前组件，更新组件数组
      context.commit('setState', { currentComponent: {}, components })

      return Promise.resolve(components)
    },
  },
})

export default store
